<template>
    <div class="insurance">
        <div class="insurance__title">
            <scroller :lock-x="false" lock-y>
                <div class="insurance__title_btn">
                    <checker v-model="insureType" radio-required default-item-class="common__item" selected-item-class="common__item-selected common__bacolor--DefaultTheme">
                        <checker-item class="grid-center" :value="item.key" v-for="(item, index) in baseRiskCodeList" :key="index">{{item.value}}</checker-item>
                    </checker>
                </div>
            </scroller>
        </div>
        <div class="insurance__list">
            <transition name="slide-fade">
                <!-- max-width:750px; 此宽度用于整体页面固定时-->
                <vue-scroller v-show="showAnimate" :style="insuranceListTop" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
                    <div id="insurance_list" class="weui-panel weui-panel_access">
                        <div class="weui-panel__bd">
                            <a :style="getProStyle(index)" v-for="(insure,index) in insurance.curShowinsurance" @click="goDetails(insure)" :key="index" class="weui-media-box weui-media-box_appmsg">
                                <div class="weui-media-box__hd"><img :src="insure.imgUrl" alt="" class="weui-media-box__thumb"></div>
                                <div class="weui-media-box__bd">
                                    <h4 class="weui-media-box__title">{{insure.productCname}}
                                    </h4>
                                    <div class="weui-media-box__desc">{{insure.descrition}}</div>
                                    <div class="weui-media-box__desc">
                                        <span v-show="insure.baseStatus=='1'">承保年龄:
                                            <span v-show="insure.minMonth!=null&&insure.minMonth>0">{{insure.minMonth}}个月</span>
                                            <span v-show="insure.minMonth==0||insure.minMonth==null">{{insure.minAge}}&nbsp</span>-&nbsp{{insure.maxAge}}周岁&nbsp</span>保障期限:{{insure.maxDeadLine}}天</div>
                                    <p class="common__card--leftspan common__color--DefaultTheme">¥{{insure.minPrice}}
                                        <span v-show="insure.isQuota==0" class="common__smallsize">起</span>
                                    </p>
                                </div>
                            </a>
                            <!-- <div :style="insuranceBtn"></div> -->
                        </div>
                    </div>
                </vue-scroller>
            </transition>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { RequestUrl } from "src/common/url";
// import SharePage from "src/js/sharePage"; //引入微信分享js
import { FooterIndex, Mutations, RouteUrl, WE_CHAT, Url_Key } from "src/common/const";
import vueScroller from "src/common/vueScroller/components/Scroller";
import { XHeader, CheckerItem, Group, Scroller, Checker, Cell, XButton, Panel } from "vux";
export default {
    computed: mapState([
        "insureBaseInfo",
        "riskCodeList",
        "insurance",
        "user",
        "saveInsure",
        "isWeChar",
        "shareUuid",
        "detailsStore",
        "insuranceListTop",
        "insuranceBtn",
        "isShop"
    ]),
    components: {
        vueScroller,
        Group,
        XHeader,
        Cell,
        Scroller,
        Checker,
        CheckerItem,
    },
    watch: {
        riskCodeList(cur, old) {
            if (!this.isReadRisk) {
                for (let i = 0; i < cur.length; i++) {
                    this.isReadRisk = true;
                    this.baseRiskCodeList.push(cur[i]);
                }
            }
            //初始化三方链接信息
            this.initUrlParam(cur);

        },
        insureBaseInfo(cur, old) {
            this.showInsureList = this.insureBaseInfo[insureQueData.type];
        },
        insureType(cur, old) {
            this.showInsureList = this.insureBaseInfo[this.insureQueData.type];
            this.showAnimate = false;
            this.queryInsure("infinite");
            let _this = this;
            setTimeout(function () {
                _this.showAnimate = true;
            }, 100);
        }
    },
    data() {
        return {
            baseRiskCodeList: [
                {
                    key: "all",
                    value: "全部"
                }
            ],
            isReadRisk: false,
            insureType: "all",
            insureQueData: {
                TYPE: "FORM",
                type: "all",
                sorttype: "ASC",
                pageNumber: 1,
                pageSize: 10
            },
            showInsureList: [],
            isQuery: false,
            showAnimate: true,
            // isShop: false,
            userCode: "",
            isAddgetList: false,
        };
    },
    methods: {
        test() {
            // this.$common.goUrl(this, RouteUrl.OPEN_SHOP);
        },
        getProStyle(value) {
            if (value % 2 == 0) {
                return "background-color:#FAFAFA;";
            } else {
                return "background-color: #FFF;";
            }
        },
        goDetails(insure) {
            let curInsure = {
                riskCode: insure.riskCode,
                indexInsure: insure
            };
            //保存产品信息
            this.$common.storeCommit(this, Mutations.INSURE_DATA_INDEX_DATA, curInsure);


            let parmList = [];

            let urlPro = {
                key: Url_Key.PRODUCT_ID,
                value: this.saveInsure.indexData.id
            }
            parmList.push(urlPro);

            localStorage["IS_SHOP_DETAIL"] = "F";
            if (insure.isCar != "1") {
                //组合URI并跳转
                this.$common.goUrl(this, RouteUrl.DETAILS, this.$common.setShareUrl(parmList));
            } else {
                this.$common.goUrl(this, RouteUrl.CAR_INSURE, this.$common.setShareUrl(parmList));
            }
        },
        onScrollBottom() { },
        goBack() {
            this.$common.goBack(this);
        },
        init() {
            if (!this.isReadRisk) {
                for (let i = 0; i < this.riskCodeList.length; i++) {
                    this.isReadRisk = true;
                    this.baseRiskCodeList.push(this.riskCodeList[i]);
                }
            }
            let _this = this;
        },
        queryInsure(operation, done) {
            let routeUrl = this.$route.path;
            this.userCode = "";
            // if (!this.isShop) {
            //     // this.userCode = "";
            //     // this.userCode = this.user.userDto.userCode;
            // } else {
            //     if (sessionStorage["INSURANCE_FORM_URL"] == RouteUrl.SHOP_MANAGE) {
            //         this.userCode = this.user.userDto.userCode;
            //     } else {
            //         this.userCode = this.saveInsure.refereeData.userCode;
            //     }
            // }
            let queryData = {
                _this: this,
                operation: operation,
                riskCode: this.insureType,
                done: done,
                type: this.isShop,
                userCode: this.userCode,
            };
            // alert(this.isShop);
            // alert(this.saveInsure.refereeData.userCode);
            // alert(this.userCode);
            this.isQuery = true;
            this.$common.storeCommit(this, Mutations.INSURANCE_OPERATION, queryData);
        },
        refresh(done) {
            let _this = this;
            $("#insurance_list").fadeOut();
            setTimeout(() => {
                _this.queryInsure("refresh", done);
                done();
            }, 500);
            $("#insurance_list").fadeIn();
        },
        infinite(done) {
            let _this = this;
            setTimeout(() => {
                _this.queryInsure("infinite", done);
                done(_this.insurance.isEnd);
            }, 500);
        },
        onItemClick(index, item) {
            console.log(index);
        },
        //初始化三方链接信息
        initUrlParam(riskCodeList) {
            let typeVal = this.$common.getUrlKey("product_type");
            if (!this.$common.isEmpty(typeVal)) {
                for (let i = 0; i < riskCodeList.length; i++) {
                    if (typeVal == riskCodeList[i].key) {
                        this.insureType = typeVal;
                        break;
                    }
                }
            }
        },
        //初始化分享信息
        // initShare() {
        //     //分享地址初始化
        //     let urlParm = {
        //         shareId: this.shareUuid
        //     };
        //     // let shareUrl = window.location.href.split('?')[0] + this.$common.getShareUrl(this, urlParm);
        //     // alert(this.shareUuid);
        //     let shareUrl = RequestUrl.BASE_URL + RouteUrl.INSURANCE + this.$common.getShareIndexUrl(this, urlParm);
        //     // let test1 = RequestUrl.BASE_URL;
        //     // let test2 = +"/" + RouteUrl.INSURANCE.split('/')[2];
        //     //微信分享初始数据
        //     let weChatData = {
        //         _this: this,
        //         shareData: {
        //             title: "恒华出行宝-产品列表",
        //             desc: WE_CHAT.shareDesc_Indexs,
        //             imgUrl: RequestUrl.WEB_PATH + "sticcxb/upload/assets/x3/logo.jpg",
        //             url: shareUrl,
        //             _this: this,
        //             type: 2
        //         }
        //     };
        //     // 微信分享
        //     SharePage.weChatShare(weChatData);
        // },
    },
    beforeRouteEnter(to, from, next) {
        sessionStorage["INSURANCE_FORM_URL"] = from.path;
        // localStorage["UUID_REF_URL"] = from.path;
        next();
    },
    mounted() {
        this.insureType = this.insurance.insureType;
        let _this = this;
        document.title = "恒华出行宝";
        // _this.$common.setUuid(_this);
        this.init();
        this.$init.indexInit(this, FooterIndex.INSURANCE);
        // let routeUrl = this.$route.path;
        //判断是否为商家开店
        // if (routeUrl.indexOf(RouteUrl.SHOP_INDEX) > -1) {
        //     this.isShop = true;
        // }
        // if (this.user.isLogin) {
        //     this.userCode = this.user.userDto.userCode;
        // }
        // this.$common.storeCommit(this, Mutations.IS_SHOW_VUE_SCROLLER_RE, true);
        this.queryInsure("infinite", "");
        //初始化分享信息
        // this.initShare();
    }
};
</script>
<style lang="scss" scoped >
.insurance {
  background-color: #f0f0f0;
}

.insurance__title {
  position: relative;
  height: 35px; // max-width: 750px;
  padding: 5px 20px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
  z-index: 2; //auto：默认值。浏览器允许一些手势（touch）操作在设置了此属性的元素上，例如：对视口（viewport）平移、缩放等操作。
  //none：禁止触发默认的手势操作
  //pan-x：可以在父级元素(the nearest ancestor)内进行水平移动的手势操作。
  //pan-y：可以在父级元素内进行垂直移动的手势操作。
  //manipulation：允许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操作都不支持。
  //touch-action只支持具有CSS width和height属性的元素
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}

.insurance__title_btn {
  width: max-content;
  text-align: center;
}

.insurance__list {
  position: relative; // max-width: 750px;
  background-color: #c8161d;
}

.grid-center {
  color: #666;
  font-size: 14px;
}

a:link {
  text-decoration: none;
  color: #fff;
}

a:visited,
a:active,
a:linked {
  text-decoration: none;
  color: #fff;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.weui-panel {
  margin-top: 0px !important;
}

.weui-media-box__hd {
  width: 120px !important;
  height: 90px !important;
}

.weui-media-box__bd {
  height: 90px !important;
}

.weui-media-box__title {
  color: #000;
  font-size: 15px !important;
}

.weui-media-box__desc {
  margin-top: 0px !important;
  line-height: 1.5 !important;
  font-size: 12px !important;
  color: #666666 !important;
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
</style>
